<template>
  <div class="msj_evaluate">
    <!-- 面包屑导航 -->
   <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <i class="el-icon-star-on"></i> 
        评价管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <i class="el-icon-star-on"></i> 
        {{ breadcrumb }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div style="width: 100%; overflow: hidden;">
      <div style="padding: 20px 0;">
        <el-button size="small" @click="tolink(1)" :type="show==1?'warning':''">评价列表</el-button>
        <el-button size="small" @click="tolink(0)" :type="show==0?'warning':''">虚拟评价</el-button>
      </div>
      <!-- 评价列表 -->
      <el-table
      v-if="show"
    :data="pingjia"
    border
    height="400"
    style="width: 100%">
    <el-table-column
      label="商品"
      width="300">
      <template slot-scope="scope">
        <div class="msj_pingjia_info">
          <div class="msj_pingjia_img">
            <img :src="scope.row.spininfo.img" alt="">
          </div>
          <span>{{ scope.row.spininfo.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="pjuser"
      label="评价者"
      width="120">
    </el-table-column>
    <el-table-column
      prop="huistatu"
      width="100"
      label="回复状态">
    </el-table-column>
    <el-table-column
    width="200"
      label="评分等级">
      <template slot-scope="scope">
        <el-rate
  :value="Number(scope.row.pfdengji)"
  disabled
  text-color="#ff9900">
</el-rate>
      </template>
    </el-table-column>
    <el-table-column
     width="100"
     prop="shstatu"
      label="审核状态">
    </el-table-column>
    <el-table-column
      prop="pjtime"
      width="200"
      label="评价时间">
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <p @click="handelClick(scope.row,1)">查看详情</p>
        <el-button  type="text" @click="handelClick(scope.row,2)" size="small">审核</el-button>
        <el-button @click="handelClick(scope.row,3)" :disabled="scope.row.huistatu=='已回复'?true:false" type="text" size="small">回复</el-button>
        <el-button @click="deleClick(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
      </el-table>
 
      <!-- 虚拟评价 -->
      <XuniEvaluate @xuni="xuniclick" v-else />
    </div>
  </div>
</template>
<script>
import {getmsjpingjia,delmsjpingjia} from '../../utils/api'
import XuniEvaluate from './Evaluate/XuniEvaluate.vue'
export default{
  components: { XuniEvaluate },
  data(){
    return {
      pingjia:[],
      show:1,
      breadcrumb:'评价列表'
    }
  },
  created(){
    this.getpingjia()
  },
  methods:{
    // 删除 
    deleClick(v){
      this.$confirm('是否删除该评论?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delmsjpingjia(v.id).then(res=>{
            this.getpingjia()
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 获取所有评价
    getpingjia(){
      getmsjpingjia().then(res=>{
      let data=res.data.data.map(v=>{
        v.spininfo=JSON.parse(v.spininfo)
          return v
      })
      this.pingjia=data
    })
    },
    // 跳转详情 审核 回复
    handelClick(v,n){
      let obj={
          detail:v,
          breadcrumb:n==1?'查看详情':(n==2?'审核评论':'回复评论'),
          btnshow:n==1?0:1,
          shshow:n==2?1:0,
          hfshow:n==3?1:0
      }
      this.$router.push({
        name:'detailevaluate',
        params:{
          data:obj
        }
      })
      sessionStorage.setItem('pingjdetail',JSON.stringify(obj))
    },
    // 跳转 评价列表 虚拟评价 
    tolink(v){
      this.show=v
      this.breadcrumb=v?'评价列表':'虚拟评价'
    },

    xuniclick(v){
        this.show=v.show
        this.breadcrumb=v.show?'评价列表':'虚拟评价'
      this.getpingjia()
    }
  }
}
</script>
<style  scoped>
  *{
    margin: 0;
  }
  .msj_pingjia_info{
    width: 80%; justify-content: space-around;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .msj_pingjia_img img{
    width: 50px;
  }
  .msj_evaluate{
    width: 100%;
    height: 100%;
  }
</style>